// 用户中心
<template>
    <div class="user-center">

        <div class="header">

            <div class="user-head-portrait">
                <img :src="userHeadPortrait" alt="用户头像">
            </div>        
                
            <h1 class="user-name">
                {{userCenterInfo.nickname}}
            </h1>

            <!-- 头像背景 -->
            <div class="multi-storey-animat">

                <i v-for="num in 5"
                    class="move-block leve1" 
                    :class='"leve" + num'> 
                </i>
                
            </div>
            
        </div>

        
        <div class="container" v-if='!updatePassword'>

            <div class="info-item" v-for='(item, index) of infoList' :key='index'>

                <h4 class="label">
                    {{item.label}}
                </h4>

                <p class="content">
                    {{userCenterInfo[item.attrName]}}
                </p>
            </div>

            <Button size='small' class="update-password" long v-if='!updatePassword' @click='controlSwitch'> 
                    修改密码
            </Button>
            
        </div>
        
        
        <div class="control" v-else>
            <div class='password-form'>
                
                <Form :model="passwordForm"> 

                   
                    
                    <FormItem label='原密码'>
                        <Input type='password' v-model="passwordForm.oldPassword"></Input>
                    </FormItem>
                    
                    <FormItem label='新密码'>
                        <Input type='password' v-model="passwordForm.newPassword"></Input>
                    </FormItem>
                    

                    <FormItem>
                        <Row :gutter='10'>

                            <Col span='12'>

                                <Button class='btn-cancel' long size='small' icon='close-round' @click='cancel'>
                                    取消
                                </Button>
                                
                            </Col>
                            <Col span="12">

                                <Button class="btn-enter" long size='small' icon='checkmark-round' @click="enter">
                                    确认
                                </Button>
                               
                            </Col>
                        </Row>
                    </FormItem>
                   
                </Form>
                
            </div>
        </div>
        
    </div>
</template>

<script lang='ts'>
  import {
    Component,
    Vue,
    Watch,
    Prop
  } from 'vue-property-decorator'

import { store } from '@/store/index'
import imgs from '@/img_path.json'


interface infoItem{
    label:string
    icon:string
    attrName:string
    color: string
}

@Component({})
export default class userCenter extends Vue{
    name:string = 'userCenter'
    
    // 用户头像
    userHeadPortrait:string = imgs.logo 

    // 是否显示密码修改表单
    updatePassword:boolean = false

    // 用户信息
    get userCenterInfo(){
        return this.$store['getters']['mainStore/userCenterInfo'];
    }

    
    passwordForm = {
        oldPassword: '',
        newPassword: '',
    }
    
    // 信息展示配置
    infoList:infoItem[] = [

        {
            label: '所属公司',
            icon: 'icon-touxiang',
            attrName: 'company',
            color: '#0057ff'
        },
        {
            label: '所属部门',
            icon: 'icon-touxiang',
            attrName: 'department',
            color: '#0057ff'
        },
        {
            label: '会员等级',
            icon: 'icon-touxiang',
            attrName: 'level',
            color: '#0057ff'
        },
        {
            label: '手机号码',
            icon: 'icon-touxiang',
            attrName: 'phone',
            color: '#0057ff'
        },
        
    ]

    // 初始化表单
    initForm (){
        let passwordForm = this.passwordForm;
        Object.keys(passwordForm).forEach(key =>{
                passwordForm[key] = ''
        })
    }

    // 切换表单
    controlSwitch (){
        this.updatePassword = !this.updatePassword;
    }

    // 表单取消
    cancel (){
        this.controlSwitch()
        this.initForm()
    }
    
    // 表单确认
    enter (){

        let _this:any = this;
        this.$store.dispatch('request', {
            url: 'patch/users/id/password',
            data: _this.passwordForm
        }).then(success =>{

            if(success){
                
                _this.$Notice.success({
                    title: '修改成功'
                })

                // 跳出编辑
                setTimeout(() => {
                    _this.cancel()
                }, 500);
            }
        })
    }
}
</script>

<style scoped lang='scss'>

.user-center{
    
    line-height: 1rem;
    
    .header{
        position: relative;
        padding: _rem(30px) 0 .7rem;
        border-bottom: _rem(2px) dashed $border_color;
        text-align: center;
    }

    .user-name{
        position: relative;
        margin-top: 1rem;
        font-weight: 400;
        font-size: $font_larg;
        z-index: 99;
    }

    .user-head-portrait{

        position: relative;
        @extend %img_box;
        $size: _rem(100px);
        margin: auto;
        width: $size;
        height: $size;
        border-radius: 100%;
        border: _rem(1px) solid #fff;
        z-index: 99;
    }
    
    .container{
        position: relative;
        padding-top: _rem(20px);
       
    }

    .info-item{

        display: flex;
        justify-content: space-between;
        align-items: center;
        
        @extend %text_overflow;
        font-size: $font_small;

        .label{
            
            margin-bottom: _rem(6px);
            font-weight: 400;
        }

        .content{
            font-weight: 600;
        }
    
        cursor: default;
        .icon{
            font-size: 1.4rem;
        }

        
        
    }
    
    .info-item + .info-item{
        margin-top: _intervals();

    }

    .update-password{
        grid-column: 1/3;
        margin-top: _rem(40px);
    }
    
}

.control{
    position: relative;
    padding-top: _rem(20px); 
    text-align: center;

    .password-form{
        position: absolute;
        top: _rem(20px);
        left: 0;
        right: 0;

        margin: auto;
    }

  
}

// 线性渐变
@mixin gradientTOB($from: $info, $to: $infoDark) {
    background-color: $from;
    background: linear-gradient(to right, $from, $to);
}

// 头像背景动画
.multi-storey-animat{
    position: absolute;

    top: _rem(-200px);
    bottom: 0;
    left: _rem(-60px);
    right: 0; 

    margin: auto;

	z-index: 1;
	
	.move-block{

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        margin: auto;

	}

	
	.leve1{
		opacity: .20;
		width: _rem(280px);
		height: _rem(280px);
		
		border-top-left-radius: 54%;
		border-bottom-left-radius: 66%;
		border-top-right-radius: 47%;
		border-bottom-right-radius: 64%;
        
        @include gradientTOB($from:  rgba(38, 78, 255, .4), $to: rgba(38, 78, 255, .14));
		animation: rotate 26s infinite ease-in-out;
			
	}
	
	.leve2{

		opacity: .18;
		width: _rem(260px);
		height: _rem(260px);
		
		border-top-left-radius: 84%;
		border-bottom-left-radius: 76%;
		border-top-right-radius: 97%;
		border-bottom-right-radius: 74%;
        
		@include gradientTOB($from:  rgba(38, 78, 255, .4), $to: rgba(38, 78, 255, .14));
		animation: rotate 28s infinite 4s ease-in-out;		
		
	}

	.leve3{
		
		opacity: .14;
		width: _rem(280px);
		height: _rem(280px);
		
		border-top-left-radius: 84%;
		border-bottom-left-radius: 76%;
		border-top-right-radius: 97%;
		border-bottom-right-radius: 74%;
        
		@include gradientTOB($from:  rgba(61, 97, 255, .6), $to: rgba(49, 73, 255, 0.2));
		animation: rotate 30s infinite 8s ease-in-out;
			
	}

	// .leve4{
		
	// 	opacity: .1;
	// 	width: _rem(280px);
	// 	height: _rem(280px);
		
	// 	border-top-left-radius: 84%;
	// 	border-bottom-left-radius: 76%;
	// 	border-top-right-radius: 97%;
	// 	border-bottom-right-radius: 74%;
        
	// 	@include gradientTOB($from:  rgb(79, 105, 218), $to: rgb(169, 178, 255));
	// 	animation: rotate 32s infinite 12s ease-in-out;	

	// }
	
	
	// .leve5{
		
	// 	opacity: .11;
	// 	width: _rem(280px);
	// 	height: _rem(280px);
		
	// 	border-top-left-radius: 91%;
	// 	border-bottom-left-radius: 76%;
	// 	border-top-right-radius: 97%;
	// 	border-bottom-right-radius: 74%;
		
	// 	background-color: $main_color;
		
	// 	animation: rotate 34s infinite 16s ease-in-out;	

	// }
	
}


@keyframes rotate{

	0% {

		transform: rotate(0);

	}
	
	20% {

		transform: rotate(72deg); 
		
	}
	40% {

		transform: rotate(144deg); 
		
	}
	80% {

		transform: rotate(216deg); 
		
	}
	100% {

		transform: rotate(360deg); 
		
	}
}

</style>